﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="toDoApp">
<head>
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.css" rel="stylesheet" />
</head>
<body>
    <div class="well-lg" ng-controller="toDoController">
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <h1>To Do App</h1>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-4 column">
                    <form role="form">
                        <input type="text" class="form-control" ng-model="toDo" placeholder="To Do Item" />
                        <input type="button" class="btn btn-default" value="Add To List" ng-click="addToDo()" />
                    </form>
                </div>
                <div class="col-md-8 column">
                    <table class="table">
                        <tr>
                            <th>To Do Item</th>
                            <th>Date Added</th>                            
                        </tr>
                        <tr ng-repeat="t in toDoArray | filter: {isActive:true}">
                            <td>{{t.toDo}}</td>
                            <td>{{t.startDate | date : "short"}}</td>                            
                            <td><input type="button" value="Mark as Complete" ng-click="completeToDo(t)" /></td>
                            <td><input type="button" value="Delete" ng-click="deleteToDo(t)" /></td>
                        </tr>
                    </table><br />
                    <table class="table">
                        <tr>
                            <th>To Do Item</th>
                            <th>Date Added</th>
                            <th>Date Completed</th>
                        </tr>
                        <tr ng-repeat="t in toDoArray | filter: {isActive:false}">
                            <td>{{t.toDo}}</td>
                            <td>{{t.startDate | date : "short"}}</td>
                            <td>{{t.finishDate| date : "short"}}</td>
                            <td><input type="button" value="Delete" ng-click="deleteToDo(t)" /></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>        
    </div>

    <script src="Scripts/jquery-2.1.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/angular.min.js"></script>
    <script src="jsmain.js"></script>
</body>
</html>
